<template>
    <div class="mapv-block">
        <l-map class="leafletmap" @click="getTooilt" ref="map" :zoom="zoom" :options="mapOptions" :center="center">
            <!-- <l-tile-layer :url="url" :attribution="attribution" /> -->
            <l-marker ref="markersRef" v-for="(item,index) in pointList" :key="index" :lat-lng="item" :icon="getIcon(item)" @click="markerClick(item,index)">
                <l-tooltip style="background:black !important">
                    <!-- <div class="my-tooltip">{{item.name}}</div> -->
                    <div class="my-tooltip">{{ item.name }}<span style="color:rgba(31, 255, 158, 1)"> </span></div>
                </l-tooltip>
            </l-marker>
            <!-- <l-polyline v-for="(item,index) in polylineList" :key="index" :lat-lngs="getPoints(item.latlngs)" :color="item.color"></l-polyline>
            <l-circle-marker v-for="(item,index) in circleMarkerList" :key="index"
                             :lat-lng="item.center"
                             :radius="item.radius"
                             :color="item.color || 'rgba(254,175,3,0.7)'"
                             :fillColor="item.color|| 'rgba(254,175,3,0.7)'" fillOpacity="1"
                             @click="circleClick(item)">
                <l-tooltip v-if="item.title" :content="item.title"/>
            </l-circle-marker>
            <l-circle v-for="(item,index) in circleList" :key="index" :lat-lng="item.center"
                      :radius="item.radius" :color="item.color" :fillColor="item.color" fillOpacity="1"
                      @click="circleClick(item)">
                <l-tooltip :options="{ permanent: true, interactive: true }" v-if="item.title" :content="item.title"/>
            </l-circle>-->
        </l-map>
        <div class="tipsBox" v-if="legend">
            <li v-for="(item,index) in tipData" :key="index"><span :style="{background:color[index]}"></span>{{ item[0].dqxmjd }}</li>
        </div>
    </div>
</template>

<script>
import {LMap, LTileLayer, LMarker, LPopup, LTooltip, LPolyline, LCircleMarker, LCircle} from 'vue2-leaflet'
import {getCurvePoints, calcCoorArr} from "@/const/CurveUtil";
import L from 'leaflet'

export default {
    name: 'VueLeaflet.vue',
    components: {
        LMap,
        LTileLayer,
        LMarker,
        LPopup, LTooltip, LPolyline, LCircleMarker, LCircle
    },
    props: {
        circleList: {
            type: Array
        },
        circleMarkerList: {
            type: Array
        },
        polylineList: {
            type: Array
        },
        pointList: {
            type: Object
        },
        center: {
            type: Object,
            default: function () {
                return {lat: 29.751342, lng: 106.642792}
            }
        },
        zoom: {
            type: Number,
            default: 5
        },
        showMarker: {
            type: String,
            default: 'xmfx'
        },
        legend: {
            type: Boolean,
            default: false
        },
        redicon: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            circle: {
                center: [106.642792, 29.751342],
                radius: 4500,
                color: 'red'
            },
            polylineColor: "",
            circleMarkerColor: "",
            url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            attribution:
                '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            mapOptions: {
                zoomControl: false,
                attribution: '',
                crs: this.$CRS_CQ
            },
            // center: L.latLng(44.24209829,85.966996072),
            //  zoom: 9,
            labelIndex: -1,
            icon1: L.icon({iconUrl: require("@/assets/images/ea8518.png"),}),
            icon2: L.icon({iconUrl: require("@/assets/images/d81e06.png"),}),
            icon3: L.icon({iconUrl: require("@/assets/images/f4ea2a.png"),}),
            icon4: L.icon({iconUrl: require("@/assets/images/1296df.png"),}),
            icon5: L.icon({iconUrl: require("@/assets/images/redicon.png"),}),
            icon6: L.icon({iconUrl: require("@/assets/images/greenicon.png"),}),
            icon7: L.icon({iconUrl: require("@/assets/images/blueicon.png"),}),
            icon8: L.icon({iconUrl: require("@/assets/images/orangeicon.png"),}),
            icon: L.icon({iconUrl: require("@/assets/images/yellow.png"),}),
            color: ['#d81e06', '#ec8447', '#f4ea2a', '#1296db'],
            tipData: [],
        }
    },
    mounted() {
        // setTimeout(() => {
        //     this.getTooilt()
        // }, 3000)
        this.$addEsri(this.$refs.map.mapObject);
        this.$setMeasureStyle(this.$refs.map.mapObject);
    },
    methods: {
        getTooilt() {
            this.$refs.markersRef.map((ref, index) => {
                console.log(ref)
                ref.mapObject.openTooltip() //代表所有弹窗都打开
                //下面就是官网 tooltip 属性
                ref.mapObject.options.direction = 'auto'
                ref.mapObject.options.permanent = true //不消失
            })
        },
        getPoints(fromToCenter) {
            let curve = getCurvePoints(fromToCenter);
            // let curve = calcCoorArr(fromToCenter[0], fromToCenter[1],100);
            return curve;
        },
        getIcon(item) {
            let icon = this.icon
            if (this.redicon == 'red') {
                icon = this.icon5;
            } else if (this.redicon == 'green') {
                icon = this.icon6;
            } else if (this.redicon == 'blue') {
                icon = this.icon7;
            } else if (this.redicon == 'orange') {
                icon = this.icon8;
            }
            return icon;
        },
        groupBy(array, f) {
            var groups = {};
            array.forEach(function (o) {
                var group = JSON.stringify(f(o));
                groups[group] = groups[group] || [];
                groups[group].push(o);
            });
            return Object.keys(groups).map(function (group) {
                return groups[group];
            });
        },
        // 移入标点
        markerOver(index) {
            this.labelIndex = index;
            let x = event.clientX
            let y = event.clientY
            let labelStyle = document.getElementById('label' + index);
            labelStyle.style.left = (x + 10) + 'px';//单位
            labelStyle.style.top = (y) + 'px';
        },
        // 移出标点
        markerOut(index) {
            this.labelIndex = -1
        },
        //点击标点
        markerClick(item, index) {
            let clientX = event.clientX
            let clientY = event.clientY
            this.$emit('markerClick', {item, index, clientY, clientX})
        },
        circleClick(item) {
            this.$emit('circleClick', item)
        }
    },
    watch: {
        pointList: {
            handler: function () {
                let _this = this
                this.tipData = this.groupBy(_this.pointList, function (item) {
                    return item.dqxmjd
                })
            },
            deep: true
        },
    }
}
</script>
<style lang="scss">
.mapv-block {
    width: 100%;
    height: 100%;
    position: relative;

    .my-tooltip {
        background-color: rgba(0, 155, 180, 0.4);
        font-weight: 500;
        color: #e7fffc;
        width: 100%;
        height: 100%;
    }

    .tipsBox {
        width: 12vw;
        height: 14vh;
        position: absolute;
        bottom: 0;
        right: 0;
        background: rgba(0, 23, 94, 0.7);
        padding: 0.5vw 1vw;
        box-sizing: border-box;

        li {
            list-style: none;
            width: 100%;
            line-height: 3vh;
            color: #fff;
            font-size: 12px;

            span {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                display: inline-block;
                background: #0000ee;
                margin-right: 1vh;
            }
        }
    }
}

.leafletmap {
    height: 100%;
    width: 100%;
}

.leaflet-container {
    //background: #000a3c;
}

.leaflet-container .leaflet-marker-pane img {
    margin-top: -30px !important;
    width: 30px !important;
    height: 30px !important;
}

.leaflet-control-attribution {
    display: none !important;
}

/deep/ .leaflet-tooltip {
    background-color: #50dbff !important;
}
</style>

